<template>
  <div class="monitor-box">
    <CardBox title="Shannon-Wiener指数"> </CardBox>
    <div class="content-container">
      <div class="statistics-chart" ref="speciesChart"></div>
    </div>
  </div>
</template>
<script>
import CardBox from "@/components/Global/CardBox.vue";
import {EventBus} from "../../utils/event-bus";
import * as echarts from "echarts";

export default {
  name: "Introduce",
  components: {
    CardBox,
  },
  data() {
    return {
      introduce:'',
    };
  },
  created() {
    EventBus.$on('set-multi-introduce', (message) => {
      this.introduce=message;
    });
  },
  mounted() {
    this.$api.species.getSpeciesTree("鸟类").then(res => {
      this.initChart(res)
    });
  },
  methods: {
    initChart(data) {
      const chartDom = this.$refs.speciesChart
      if (!chartDom) return

      const chart = echarts.init(chartDom,'dark')
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,24,106,0.8)',
          borderColor: 'rgba(0,150,255,0.3)',
          textStyle: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          }
        },
        legend: {
          data: ['Shannon-Wiener指数'],
          textStyle: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          },
          top: 10,
          right: 10
        },
        grid: {
          top: '15%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2025年1月','2025年2月','2025年3月','2025年4月','2025年5月','2025年6月','2025年7月','2025年8月'],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {
            color: '#fff',
            fontFamily: 'DIN Pro'
          }
        },
        series: [
          {
            name: '指数',
            type: 'line',
            data: [1.54,0.93,1.33,1.43,1.34,1.33,1.32,1.25],
            lineStyle: {
              color: '#3DD78C'
            },
            itemStyle: {
              color: '#3DD78C'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(61,215,140,0.3)'
                }, {
                  offset: 1,
                  color: 'rgba(61,215,140,0)'
                }]
              }
            },
            smooth: true
          },
          // {
          //     name: '总量',
          //     type: 'line',
          //     data: this.chartData.total,
          //     lineStyle: {
          //         color: '#3DD78C'
          //     },
          //     itemStyle: {
          //         color: '#3DD78C'
          //     },
          //     areaStyle: {
          //         color: {
          //             type: 'linear',
          //             x: 0,
          //             y: 0,
          //             x2: 0,
          //             y2: 1,
          //             colorStops: [{
          //                 offset: 0,
          //                 color: 'rgba(61,215,140,0.3)'
          //             }, {
          //                 offset: 1,
          //                 color: 'rgba(61,215,140,0)'
          //             }]
          //         }
          //     },
          //     smooth: true
          // }
        ]
      }

      chart.setOption(option);
    }
  }
};
</script>

<style lang="scss" scoped>

.statistics-chart {
  width: 100%;
  height: 100%;
}
  .content-container{
    height: 380px;
  }
</style>